<script setup>
	import {
		ref
	} from 'vue'
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	const db = uniCloud.database();
	const dbCmd = db.command;
	const loadModal = ref(true)
	const page = ref(0)
	const movieList = ref([])
	const currentNav = ref([{
			type: '电影',
			index: 0
		},
		{
			type: '',
			index: 0
		},
		{
			type: '',
			index: 0
		},
		{
			type: '',
			index: 0
		},
		{
			type: '',
			index: 0
		},
	])
	const navList = ref([
		['电影', '连续剧', '动漫', '综艺'],
		['全部', '动作', '科幻', '喜剧', '爱情', '恐怖', '战争', '犯罪', '纪录', '剧情', '动画'],
		['全部', '大陆', '香港', '台湾', '日本', '韩国', '美国', '英国'],
		['全部', 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012]
	])
	onShow(() => {
		getMovieList()
	})
	const navClick = (i, index, item) => {
		loadModal.value = true; // 点击导航栏时显示加载状态
		if (item == '全部') {
			currentNav.value[i].type = ''
		} else {
			currentNav.value[i].type = item
		}
		currentNav.value[i].index = index
		// 分类点击
		if (i == 0) {
			if (item == '电影') {
				navList.value[1] = ['全部', '动作', '科幻', '喜剧', '爱情', '恐怖', '战争', '犯罪', '纪录', '剧情', '动画']
			} else if (item == '连续剧') {
				navList.value[1] = ['全部', '国产剧', '香港剧', '日本剧', '韩国剧', '欧美剧', '泰国剧']
			} else if (item == '动漫') {
				navList.value[1] = ['全部', '国产动漫', '日韩动漫', '欧美动漫']
			} else if (item == '综艺') {
				navList.value[1] = ['全部', '大陆综艺', '港台综艺', '日韩综艺', '欧美综艺']
			}
			// 重置cat
			currentNav.value[1].type = ''
			currentNav.value[1].index = 0
		}
		// 还原
		movieList.value = []
		page.value = 0
		getMovieList()
	}
	const getMovieList = async () => {
		// 构建查询条件对象
		const queryConditions = {};
	
		if (currentNav.value[0].type !== '') {
		    queryConditions.typeDesc = new RegExp(currentNav.value[0].type, 'i');
		}
	
		if (currentNav.value[1].type !== '') {
		    queryConditions.cat = new RegExp(currentNav.value[1].type, 'i');
		}
	
		if (currentNav.value[2].type !== '') {
		    queryConditions.area = new RegExp(currentNav.value[2].type, 'i');
		}
	
		if (currentNav.value[3].type !== '') {
		    queryConditions.year = parseInt(currentNav.value[3].type);
		}
		const dataResult = await db.collection('movies')
		    .orderBy('movieId', 'desc')
		    .where(queryConditions)
		    .skip(20 * page.value) // 修正分页偏移
		    .limit(20)
		    .get();
	    movieList.value.push(...dataResult.result.data)
	    page.value += 1
	    loadModal.value = false
	}
	const goDetail = (id) => {
		uni.navigateTo({
			url: '/pages/playPage/playPage?id=' + id
		})
	}
	onReachBottom(() => {
		getMovieList()
	})
</script>
<template>
	<view class="nav padding-sm fixed bg-white">
		<scroll-view scroll-x="true" class="hd-list" v-for="(item,ind) in navList" :key="ind">
			<view v-for="(item,index) in navList[ind]" :key="index" class="hd-list-item"
				:class="currentNav[ind].index==index?'active':''" @tap="navClick(ind,index,item)">
				{{item}}
			</view>
		</scroll-view>
	</view>
	<view class="cu-load load-modal" v-if="loadModal">
		<view class="cuIcon-search text-drab"></view>
		<view class="gray-text">加载中...</view>
	</view>
	<view v-else class="grid col-3" style="margin-top: 400rpx;">
		<view v-if="movieList.length > 0" v-for="item in movieList" :key="item._id" class="padding-xs" @tap="goDetail(item.movieId)">
			<image :src="item.image_thumb" style="height:320rpx;"></image>
			<view class="text-cut">{{item.nm}}</view>
		</view>
		<view v-else style="margin:100rpx auto;">
			<image 
			  src="/static/none.png" 
			  mode="widthFix" 
			></image>
		</view>
	</view>

</template>
<style lang="scss">
	.hd-list {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		margin-bottom: 20rpx
	}

	.hd-list-item {
		display: inline-block;
		color: $text-one;
		font-size: 30rpx;
		padding: 14rpx 28rpx;
		margin-right: 15rpx;
		border-radius: 20rpx;
		border: 2rpx solid #fff;
		background-color: #fff;
	}

	.active {
		color: #ffffff;
		background-color: #5a7c4d;
	}
</style>